<template>
	<view class="tongji-box">
		<view class="tongji-box-content">
			<view class="tongji-nav">
				<view v-for="(item,index) in toplist" :key="index" :class="{'btna': count === index}"  class="biaoti1" @click="change(index)">{{item}}</view>
			</view>
			<view class="tongji-nav-con">
				<view class="tongji_info"  :class="{dis:count === 0}">
					<xueshengList :banji='banji'></xueshengList>
				</view>
				<view class="tongji_info" :class="{dis:count === 1}">
					<tongjiList :banji='banji'></tongjiList>
				</view>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import xueshengList from "@/pages/components/xueshengList.vue"
	import tongjiList from "@/pages/components/tongjiList.vue"
	export default {
		data() {
			return {
				toplist:['学生列表','统计列表'],
				count:0,
				banji:'1111'
				
			}
		},
		methods: {
			change(index){
				this.count = index;
			}
		},
		onLoad(options) {
			this.banji = options.banji;
		},
		components:{
			xueshengList,
			tongjiList
		}
	}
</script>

<style lang="scss">
@import url(@/static/common.css);
.tongji-box{
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	.tongji-box-content{
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		.tongji-nav{
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			view{
				justify-content: center;
				align-items: center;
				flex: 1;
				display: flex;
				background: #f5f5f5;
				padding: 40rpx 0;
				
			}
			.btna{
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				color: #77312A;
				font-weight: bold;
				background: #ffffff !important;
				position: relative;
			}
		}
		.tongji_info{
			display: none;
		}
		.dis{
			display: block;
		}
	}
}

</style>
